<template>
	<view class="flex-col page">



		<view class="flex-col ">
			<u-skeleton rows="10" :loading="loading" :title="false" rowsHeight="110" style="margin-top: 30rpx;">
			</u-skeleton>

			<view class="no" v-if="total === 0">
				<zNo></zNo>
			</view>
			<view class="list">
				<view class="list-view" v-for="(item,index) in productlList" :key="index">
					<view class="img">
						<image class="image" :src="item.avatar" mode="aspectFill" @click="previewimage(item.album)">
						</image>
						<image class="pos" src="../../static/zy/10@2x.png" mode=""></image>
						<view class="socre">{{item.stars}}星级</view>
					</view>
					<view class="right">
						<view class="h1">
							<image class="news" src="../../static/zy/new.png" mode=""></image>
							<text @click="toPath(item)">{{ item.realname }}</text>
							<image class="shop" src="../../static/zy/shangjia.png" mode=""></image>
							<view class="text" @click="toTeinfo(item)">商家</view>
							<view class="time" v-if="item.appointment_time === '休息中'"></view>
							<view class="time" v-else>最早可约：{{ item.appointment_time }}</view>
						</view>
						<view class="h2">
							<image class="star" src="@/static/zy/shoucangx.png" mode=""></image>
							<text class="num">{{ item.praise }}</text>
							<view class="btn">
								{{ item.practice }}年经验
							</view>
							<view class="address">
								<image src="../../static/zy/dingwei4@2x.png" mode=""></image>距离{{ item.distance }}km
							</view>
						</view>
						<view class="h3">
							<text>{{item.label_top}}</text>
							<view @click="toPath(item)" :class="item.appointment_time === '休息中' ? 'grey' : ''">
								{{ item.appointment_time === '休息中' ? '服务中' : '立即预约' }}
							</view>
						</view>
						<view class="h4">
							<view>
								<!-- <image src="../../static/zy/xihuan6@2x.png" mode=""></image> -->
								<image v-if="item.collect" src="../../static/my/itemc.png" class="image_17"
									@click="changeCollect(item,index,0)" />
								<image v-else src="../../static/zy/xihuan6@2x.png" class="image_17"
									@click="changeCollect(item,index,1)" />

								<text v-if="item.collect"
									@click="changeCollect(item,index,0)">{{item.collectCount}}收藏</text>
								<text v-else @click="changeCollect(item,index,1)">{{item.collectCount}}收藏</text>
							</view>
							<view @click="toComment(item)">
								<image src="../../static/zy/pinglun7@2x.png" mode=""></image>
								<text>{{ item.comment }}评论</text>
							</view>
							<view>
								<image src="../../static/zy/dingdan@2x.png" mode=""></image>
								<text>{{ item.sales }}单</text>
							</view>
						</view>
					</view>
				</view>
				<view class="list-view" style="opacity: 0;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				productlList: [],
				latitude: '',
				longitude: '',
				value: '',
				dataList: [],
				total: null,
				page: 1,
				name: '',
				shownone: false
			};
		},
		onLoad(options) {
			// uni.$u.sleep(2000).then(() => {

			// })

			let {
				name
			} = options;
			if (name) {
				this.name = name;
			}
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			uni.getLocation({
				altitude: false,
				geocode: true,
				type: 'gcj02',
				success: (res) => {
					this.longitude = res.longitude;
					this.latitude = res.latitude;
					this.init();
				},
				fail: (err) => {
					console.log(err)
					this.latitude = 39.5;
					this.longitude = 116.3;
					this.init();
				}
			})
		},
		methods: {
			previewimage(imageUrl) { //预览图片
				console.log(imageUrl)
				var images = [];
				images.push(imageUrl);
				uni.previewImage({ // 图片路径必须是一个数组 => ['']
					current: 0,
					urls: imageUrl,
				});
			},
			init() {

				let order_info = uni.getStorageSync('order_info');

				this.$http.post('api/technician/index', {
					lat: this.latitude,
					lng: this.longitude,
					realname: this.value,
					service_id: order_info.service_id,
					page: this.page
				}).then(res => {
					console.log(res, 'xxxx')
					let {
						list,
						total
					} = res;
					list.length == 0 ? this.shownone = true : false
					this.productlList.push(...list);
					this.total = total;
					this.loading = false;
					uni.hideLoading()
				}).catch(Error => {
					uni.hideLoading()
				})
			},
			toPath(item) {
				if (item.appointment_time == '休息中') {
					uni.showToast({
						title: '该技师在休息中',
						icon: 'none'
					})
					return
				}
				let order_info = uni.getStorageSync('order_info');
				order_info.technician_id = item.id;
				uni.setStorageSync('order_info', order_info);
				uni.navigateTo({
					url: `/pages/confirm_order/confirm_order?id=${item.id}`
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 10rpx;
		background-color: #f8f8f8;
		height: 100%;
		width: 100%;
		overflow-y: auto;

		.section_1 {
			padding: 50rpx 32rpx 206rpx;

			background-image: linear-gradient(180deg,
					rgb(49, 208, 129) 0%,
					rgb(49, 208, 129) 2.91%,
					rgb(36, 194, 116) 75.56%,
					rgb(248, 248, 248) 92.1%,
					rgb(248, 248, 248) 100%);

			.group {

				color: rgb(255, 255, 255);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;

				.group_2 {
					margin-left: 54rpx;

					.image_1 {
						margin-bottom: 4rpx;
						width: 28rpx;
						height: 34rpx;
					}

					.text_1 {
						margin-left: 14rpx;
					}
				}

				.image {
					width: 40rpx;
					height: 40rpx;
				}

				.text {
					margin-left: 8rpx;
				}
			}

			.section_2 {

				margin-top: 24rpx;
				padding: 26rpx 24rpx;
				color: rgb(24, 181, 103);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				white-space: nowrap;
				background-color: rgb(255, 255, 255);
				border-radius: 24rpx 24rpx 0px 0px;

				.image_2 {
					width: 48rpx;
					height: 48rpx;
				}

				.text_2 {
					margin-left: 8rpx;
				}
			}
		}

		.list {

			padding: 0rpx 25rpx 0;
			//#ifdef APP-PLUS
			padding: 0rpx 25rpx 0;

			//#endif
			&-view {
				padding: 25rpx;
				background-color: white;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				display: flex;

				.img {
					width: 180rpx;
					height: 225rpx;
					flex-shrink: 0;
					position: relative;

					.image {
						width: 180rpx;
						height: 225rpx;
						border-radius: 10rpx;
					}

					.pos {
						width: 71rpx;
						height: 36rpx;
						position: absolute;
						top: 0;
						left: -6rpx;
					}

					.socre {
						position: absolute;
						bottom: 0;
						right: 0;
						padding: 0 15rpx;
						height: 33rpx;
						background: linear-gradient(-62deg, #F28E26 0%, #FD644F 100%);
						border-radius: 10rpx 0px 10rpx 0px;
						color: white;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.right {
					flex: 1;
					margin-left: 20rpx;
					height: 225rpx;
					display: flex;
					flex-direction: column;

					.h1 {
						display: flex;
						align-items: center;
						color: #808080;
						font-size: 23rpx;

						.news {
							width: 45rpx;
							height: 23rpx;
							margin-right: 10rpx;
						}

						text {
							color: #0A0A0A;
							font-size: 30rpx
						}

						.shop {
							margin-left: 20rpx;
							width: 24rpx;
							height: 23rpx;
							margin-right: 5rpx;
						}

						.text {
							flex: 1;
						}

						.time {
							//width: 191rpx;
							height: 46rpx;
							background: #F2F9EC;
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #62C281;
							font-size: 20rpx;
						}
					}

					.h2 {
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						.star {
							width: 22rpx;
							height: 21rpx;
						}

						.num {
							color: #FF6100;
							margin-left: 10rpx;
							font-size: 24rpx;
						}

						.btn {
							width: 119rpx;
							height: 39rpx;
							flex-shrink: 0;
							background: #FAF4E8;
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #C28134;
							font-size: 20rpx;
							margin-left: 20rpx;
						}

						.address {
							flex: 1;
							display: flex;
							color: #999999;
							font-size: 20rpx;
							align-items: center;
							justify-content: flex-end;

							image {
								margin-right: 12rpx;
								width: 20rpx;
								height: 22rpx;
							}
						}
					}

					.h3 {
						display: flex;
						align-items: center;
						color: #3CA970;
						font-size: 22rpx;
						margin-top: 20rpx;

						text {
							flex: 1;
						}

						view {
							flex-shrink: 0;
							width: 139rpx;
							height: 52rpx;
							background: linear-gradient(90deg, #3BA96F 0%, #57B88A 100%);
							border-radius: 26rpx;
							color: white;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.grey {
							background: #E00 !important;
						}
					}

					.h4 {
						display: flex;
						flex: 1;
						align-items: flex-end;

						view {
							display: flex;
							align-items: center;
							color: #808080;
							font-size: 20rpx;
							margin-right: 30rpx;

							image {
								margin-right: 10rpx;
							}
						}

						view:first-of-type {
							image {
								width: 23rpx;
								height: 20rpx;
							}
						}

						view:nth-of-type(2) {
							image {
								width: 20rpx;
								height: 21rpx;
							}
						}

						view:nth-of-type(3) {
							image {
								width: 17rpx;
								height: 21rpx;
							}
						}
					}
				}
			}
		}
	}

	

	// .unab /deep/ .uni-nav-bar-text {
	// 	font-size: 36rpx;
	// 	font-family: PingFangSC-Semibold, PingFang SC;
	// 	font-weight: 600;
	// 	color: #333333;
	// }

	.b5 {
		width: 535rpx;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 28rpx;
		background: #f5f5f5;
		display: flex;
		align-items: center;
	}

	.rows1 {
		align-items: center;
	}

	.imgLey {
		-webkit-animation-name: scaleDraw;
		-webkit-animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-duration: 2.5s;

	}

	@keyframes scaleDraw {
		0% {
			transform: scale(1);
		}

		25% {
			transform: scale(1.2);
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.2);
		}
	}

	.ul1 {
		width: 128rpx;
		height: 42rpx;
		background: #1DD39B;
		border-radius: 21rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 42rpx;
		margin-top: 7rpx;
	}

	.ul2 {
		width: 128rpx;
		height: 42rpx;
		background: #1DD39B;
		border-radius: 21rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 42rpx;
		margin-top: 7rpx;
	}

	.ul3 {
		width: 128rpx;
		height: 42rpx;
		border-radius: 21px;
		border: 1px solid #727272;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #727272;
		text-align: center;
		line-height: 42rpx;
		margin-top: 7rpx;
	}

	.moreImg {
		width: 114rpx;
		height: 42rpx;
		background: #1DD39B;
		border-radius: 9rpx;
		display: inline-block;
		margin-left: 15rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 42rpx;
	}

	.t8 {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #727272;
	}

	.image_71 {
		width: 22rpx;
		height: 26rpx;
		margin-right: 7rpx;
		margin-top: 6rpx;
	}

	.image_71txt {
		color: #333;
		font-size: 26rpx;
	}
</style>
